<template>
  <div>
    <gz-modal v-model="show" type="custom" :title="modalKey == 'yijiao' ? '移交' : '分配'" @changeShow="handleClose"
      @confirm="setQueryParams">
      <template slot="content">
        <div class="modal-group" v-if="modalData && modalData.id">
          <div class="modal-cell">
            <div class="cell-title default">经办机构</div>
            <div :class="['cell-value',disposeData.institution.name ? 'default' : 'placeholder']"
              @click="openPicker('jbjg')">
              <div>
                {{disposeData.institution.name || '请选择经办机构'}}
              </div>
              <van-icon v-if="modalKey == 'fenpei'" name="arrow" style="margin-left: 16px;" size="16px" />
            </div>
          </div>
          <div class="modal-cell" v-if="modalKey == 'yijiao'">
            <div class="cell-title default">原经办人</div>
            <div :class="['cell-value',disposeData.oldRole ? 'default' : 'placeholder']">{{disposeData.oldRole}}</div>
          </div>
          <div class="modal-cell" v-if="modalKey == 'yijiao'">
            <div class="cell-title default">任务状态</div>
            <div :class="['cell-value',disposeData.statusName ? 'default' : 'placeholder']">{{disposeData.statusName}}
            </div>
          </div>
          <div class="modal-cell">
            <div class="cell-title default">经办人</div>
            <div :class="['cell-value',disposeData.role.userName ? 'default' : 'placeholder']"
              @click="openPicker('jbr')">
              <div>
                {{disposeData.role.userName || '请选择经办人'}}
              </div>
              <van-icon name="arrow" style="margin-left: 16px;" size="16px" />
            </div>
          </div>
          <div class="modal-cell" v-if="modalKey == 'fenpei'" @click="openPicker('fplx')">
            <div class="cell-title default">分配类型</div>
            <div :class="['cell-value',disposeData.fpType.name ? 'default' : 'placeholder']">
              <div>
                {{disposeData.fpType.name}}
              </div>
              <van-icon name="arrow" style="margin-left: 16px;" size="16px" />
            </div>
          </div>
        </div>
      </template>
    </gz-modal>
    <gz-modal v-model="pickerShow" type="picker" :title="pickerData.title" :pickerData="pickerData.columns"
      :pickerLoading="pickerData.isLoading" :pickerKey="pickerData.key" @confirm="pickerConfirm"></gz-modal>
  </div>
</template>

<script>
  import {
    gzModal
  } from '@/components/customize'
  export default {
    components: {
      gzModal
    },
    props: {
      screenModel: {
        type: Boolean,
        default: false
      },
      statusList: {
        type: String,
        default: ''
      },
      queryParams: {
        type: Object,
        default: () => {}
      },
      modalKey: {
        type: String,
        default: ''
      },
      modalData: {
        type: Object,
        default: () => {}
      }
    },
    model: {
      prop: 'screenModel',
      event: 'changeShow'
    },
    data() {
      return {
        show: false,
        show1: false,
        show2: false,
        treeData: [],
        treeData1: [],
        modalTitle: '',
        modalTypeValue: {
          activeId: 0
        },
        modalTypeValue1: {
          activeId: 0
        },
        modalUrgencyValue: {
          activeId: 0
        },
        modalStatusValue: {
          activeId: this.statusList
        },
        searchData: {},
        page: '',
        disposeData: {
          institution: {
            name: ''
          },
          oldRole: '',
          statusName: '',
          role: {
            name: '',
            id: '',
            userName: ''
          },
          fpType: {
            name: '需要签收',
            key: 'weak'
          }
        },
        pickerShow: false,
        pickerData: {
          title: '',
          columns: {
            titles: [],
            columns: []
          },
          isLoading: false,
          key: 'name'
        },
        instList: [],
      }
    },
    created() {
      this.page = this.$route.path
    },
    mounted() {
      // this.getTreeData()
      if (this.modalKey == 'yijiao') {
        this.disposeData = {
          institution: {
            name: this.modalData.taskOrgName,
            id: this.modalData.taskOrgId
          },
          oldRole: this.modalData.userName,
          statusName: this.modalData.statusName,
          role: {
            name: '',
            id: '',
            userName: ''
          },
          fpType: 'weak'
        }
      }
    },
    watch: {
      modalData(val) {
        if (this.modalKey == 'yijiao') {
          this.disposeData.institution = {
            name: val.taskOrgName,
            id: val.taskOrgId
          }
          this.disposeData.oldRole = val.userName
          this.disposeData.statusName = val.statusName
        }
      }
    },
    methods: {
      openPicker(type) {
        switch (type) {
          case 'jbjg':
            if (this.modalKey == 'yijiao') return
            this.pickerShow = true
            this.pickerData.title = '选择经办机构'
            if (this.modalKey != type) {
              this.pickerKey = type
              this.getInstList()
            }
            break;
          case 'jbr':
            if (!this.disposeData.institution.name) {
              this.$toast.fail('请先选择经办机构')
              break
            }
            this.pickerShow = true
            this.pickerData.title = '选择经办人'
            if (this.modalKey != type) {
              this.pickerKey = type
              this.getRoleList(this.disposeData.institution.id)
            }
            break;
          case 'fplx':
            this.pickerShow = true
            this.pickerData.title = '选择分配类型'             this.pickerKey = type
             this.pickerData.columns = {
               titles: [],
               columns: [
                 {
                   name: '需要签收',
                   key: 'weak'
                 },
                 {
                   name: '无需签收',
                   key: 'strong'
                 }
               ],
             }             // this.getRoleList(this.disposeData.institution.id)
            break;
        }
      },
      getInstList() {
        this.pickerData.isLoading = true
        this.baseService.postForm(this.__ctx + '/org/group/listJson', {}).then(res => {
          this.pickerData.isLoading = false
          if (res.isOk) {
            this.pickerData.columns = {
              titles: ['经办机构'],
              columns: res.rows,
            }
          } else {
            this.pickerData.columns = {}
            this.$toast.fail(res.msg)
          }
        }).catch((err) => {
          this.pickerData.columns = {}
          this.pickerData.isLoading = false
        })
      },

      getRoleList(id) {
        this.pickerData.isLoading = true
        this.baseService.postForm(this.__ctx + '/taskPool/getUserList', {
          groupId: id,
          groupType: 'org'
        }).then(res => {
          this.pickerData.isLoading = false
          if (res.isOk) {
            let userList = res.data
            let column1 = []
            let column2 = []
            userList.forEach(v => {
              let obj1 = {}
              obj1.userId = v.userId
              obj1.name = `【${v.account}】${v.userName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${v.num}`
              obj1.userName = v.userName
              column1.push(obj1)
            })
            this.pickerData.columns = {
              titles: ['工号/姓名', '当前待办任务'],
              columns: column1
            }
          } else {
            this.roleList = []
            this.$toast.fail(res.msg)
          }
        }).catch((err) => {
          this.pickerData.columns = {}
          this.pickerData.isLoading = false
        })
      },
      handleClose(status) {
        this.$emit('changeShow', status)
      },

      disposeStatusList(statusList) {
        return statusList.split(',')
      },

      openNextModal(row) {
        this.modalTypeValue = row
        this.$set(this.modalTypeValue, 'activeId', row.id)
        if (row.id == 0) {
          this.searchData["def.type_id_$VEQ"] = ''
          this.searchData["def.key_$VEQ"] = ''
        } else {
          if (row.children) {
            let children = row.children
            let all = {
              id: row.id,
              countName: '全部'
            }
            if (children[0].id != row.id) {
              children.unshift(all)
            }
            if (!this.modalTypeValue1.activeId) {
              this.modalTypeValue1 = {
                ...all,
                activeId: row.id
              }
            }
            this.treeData1 = children
            this.modalTitle = row.countName
            this.show1 = true
          } else {
            if (row.type == "tree") {
              this.searchData["def.key_$VEQ"] = ''
              this.searchData["def.type_id_$VEQ"] = row.id;
            } else if (row.type == "flow") {
              this.searchData["def.type_id_$VEQ"] = ''
              this.searchData["def.key_$VEQ"] = row.id;
            }
          }
        }
      },

      setTypeId(row) {
        this.modalTypeValue1 = row
        this.$set(this.modalTypeValue1, 'activeId', row.id)
        if (row.id == this.modalTypeValue.id) {
          if (this.modalTypeValue.type == "tree") {
            this.searchData["def.key_$VEQ"] = ''
            this.searchData["def.type_id_$VEQ"] = row.id;
          } else if (this.modalTypeValue.type == "flow") {
            this.searchData["def.type_id_$VEQ"] = ''
            this.searchData["def.key_$VEQ"] = row.id;
          }
        } else {
          if (row.type == "tree") {
            this.searchData["def.key_$VEQ"] = ''
            this.searchData["def.type_id_$VEQ"] = row.id;
          } else if (row.type == "flow") {
            this.searchData["def.type_id_$VEQ"] = ''
            this.searchData["def.key_$VEQ"] = row.id;
          }
        }
      },

      getTreeData() {
        this.baseService.postForm(this.__ctx + '/taskPool/getTaskPoolDefTypeTree', {
          "statusList": this.statusList
        }).then(res => {
          if (res.data.length > 0) {
            this.treeData = res.data
          }
        })
      },

      setQueryParams() {
        if (!this.disposeData.role.userId) {
          this.$toast.fail('请选择经办人')
          return
        }
        if (this.modalKey == 'fenpei') {
          if (!this.disposeData.institution.id) {
            this.$toast.fail('请选择经办机构')
            return
          }
        }
        let data = {
          taskId: this.modalData.id,
          version: this.modalData.version,
          ...this.disposeData
        }
        this.$emit('dispose', data)
        this.show = false
      },

      pickerConfirm(data) {
        switch (this.pickerKey) {
          case 'jbjg':
            this.$set(this.disposeData, 'institution', data[0])
            this.pickerShow = false
            break;
          case 'jbr':
            this.$set(this.disposeData, 'role', data[0])
            this.pickerShow = false
            break;
          case 'fplx':
            this.$set(this.disposeData, 'fpType', data[0])
            this.pickerShow = false
            break;
        }
        // if(this.pickerKey == 'jbjg') {

        // }
      },

      openModal() {
        this.show = true
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("publicStyle.less");

  .screen-list {
    padding: 0 16px;
    box-sizing: border-box;

    .screen-option {
      .title {
        font-size: 16px;
        color: #1D2129;
        font-weight: 500;
        margin-bottom: 12px;
      }

      .screen-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        justify-content: space-between;

        .screen-item {
          flex: 0 0 32%;
          text-align: center;
          font-size: 14px;
          color: #1D2129;
          font-weight: 400;
          padding: 9px 0;
          background-color: #F4F4F4;
          border-radius: 60px;
          margin-bottom: 16px;
        }

        .active-item {
          color: #FF4A32;
          box-sizing: border-box;
          border: 1px solid #FF4A32;
          background-color: #FEF7F7;
        }
      }
    }
  }
</style>
